<template>
    <div>
        <MyTitle title="学科管理"></MyTitle>
        <el-row class="mt10">
            <el-button type="primary" @click="addAction">添加学科</el-button>
        </el-row>

        <SearchTable @reset="resetList" @search="todoSearch">
        </SearchTable>

        <el-row class="mt10">

            <el-col :span="23">
                <el-table :data="xuekeList" stripe style="width: 100%" center border :row-key="(item) => item._id">
                    <el-table-column type="index" label="序号" width="60" align="center" />

                    <el-table-column label="学科名称" width="auto" align="center">
                        <template #default="scope">
                            <span> {{ scope.row.label }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="学科编码" width="auto" align="center">
                        <template #default="scope">
                            <span> {{ scope.row.value }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="添加时间" width="220" align="center">
                        <template #default="scope">
                            <span> {{ $filters.timeFormat(scope.row.time, 'YYYY-MM-DD hh:mm') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="主键" width="220" align="center">
                        <template #default="scope">
                            <el-tag color="#123456"> {{ scope.row._id }}</el-tag>
                        </template>
                    </el-table-column>


                    <el-table-column label="操作" width="auto" align="center" fixed="right">
                        <template #default="scope">
                            <el-popconfirm title="你确定要删除吗???" @confirm="ToDoDelete(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button link type="danger" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button link type="primary" size="small"
                                @click="updateItem(scope.row, scope.$index)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>


                <div class="pagesize">

                </div>
            </el-col>
        </el-row>

        <DiaLogForm ref="diaRef" :btn="flag ? '添加' : '修改'" :title="flag ? '添加学科' : '修改学科'" :rules="rules"
            :type="flag ? 'primary' : 'success'" @todoconfirm="todoconfirm">
            <template #default="{ form }">
                <el-form-item label="学科名称" prop="label">
                    <el-input clearable v-model="form.label" type="text" placeholder="请输入学科名称" autocomplete="off" />
                </el-form-item>
                <el-form-item label="学科编码" prop="value">
                    <el-input clearable v-model="form.value" type="text" placeholder="请输入学科编码" autocomplete="off" />
                </el-form-item>
            </template>
        </DiaLogForm>
    </div>
</template>   

<script lang="ts" setup >
import { reactive, ref, onMounted, toRefs, toRaw } from 'vue'
import { formRefType } from '../../utils/types';
import { Http } from '../../api/api';

const state = reactive({
    xuekeList: [],
    flag: true
})
const { xuekeList, flag } = toRefs(state)
const diaRef = ref<formRefType>()
const rules = reactive<any>({
    label: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    value: [
        { required: true, message: '请输入', trigger: 'blur' },
    ]
})
const addAction = () => {
    state.flag = true;
    diaRef.value.show = true;
}

const getXuekeList = async (payload?: any) => {
    let res = await Http.getxuekelist(payload) as any;
    if (res.code == 200) {
        state.xuekeList = res.result;
    }
}

const todoconfirm = async (data: any) => {

    if (state.flag) {
        let res = await Http.addxueke(data) as any;
        if (res.code == 200) {
            diaRef.value.handleClose()
            getXuekeList()
        }
    } else {
        console.log(data)
        let res = await Http.updatexueke(data) as any;
        console.log(data)
        if (res.code == 200) {

            state.xuekeList = state.xuekeList.map((item: any) => {
                if (item._id == data._id) {
                    item = { ...toRaw(data) }
                }
                return item;
            })
            diaRef.value.handleClose()
        }
    }
}

const ToDoDelete = async (item: any, index: number) => {
    let res = await Http.deletexueke({
        _id: item._id
    }) as any;
    if (res.code == 200) {
        state.xuekeList.splice(index, 1)
    }
}

const updateItem = (item: any, index: number) => {
    state.flag = false;
    diaRef.value.show = true;
    diaRef.value.form = Object.assign({}, item)
}

const resetList = () => {
    getXuekeList()
}
const todoSearch = (data: any) => {
    getXuekeList(data)
}
onMounted(() => {
    getXuekeList()
})


</script>
